<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast 封装</title>
    <style>
        /* Toast 样式 */
        .toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 20px;
            color: #fff;
            border-radius: 5px;
            font-size: 16px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease, bottom 0.3s ease;
        }
        .toast.show {
            opacity: 1;
            bottom: 40px;
        }
        .toast.message { background-color: #147EC9; }
        .toast.success { background-color: #11AD45; }
        .toast.warning { background-color: #F5A300; }
        .toast.error { background-color: #E60914; }
    </style>
</head>
<body>
    <button onclick="showToast('这是消息提示', 'message')">显示消息</button>
    <button onclick="showToast('操作成功', 'success')">显示成功</button>
    <button onclick="showToast('这是警告', 'warning')">显示警告</button>
    <button onclick="showToast('发生错误', 'error')">显示错误</button>

    <script>
        let toastTimeout;

        function showToast(message, type) {
            // 检查是否已有 Toast 存在
            let existingToast = document.querySelector('.toast');
            if (existingToast) {
                clearTimeout(toastTimeout);
                existingToast.remove();
            }

            // 创建新的 Toast 元素
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            toast.textContent = message;
            document.body.appendChild(toast);

            // 显示 Toast
            setTimeout(() => {
                toast.classList.add('show');
            }, 10);

            // 自动移除 Toast
            toastTimeout = setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
    </script>
</body>
</html>